import { Suspense } from "react";
import { Routes, Route, BrowserRouter } from "react-router-dom";
import { routes } from "./router/route.config";
import RouteGuards from "./router/RouteGuards";
import { TRoutes } from "./router";
function App() {
  const token = localStorage.getItem("token");

  return (
    <Suspense fallback={<div>loading...</div>}>
      <BrowserRouter>
        <Routes>
          {routes.map((item: TRoutes) => (
            <Route
              key={item.name}
              path={item.path}
              element={
                item.path !== "" ? (
                  <RouteGuards isAuthentication={!!token}>
                    {item.element}
                  </RouteGuards>
                ) : (
                  item.element
                )
              }
            >
              {item.children &&
                item.children.map((item) => (
                  <Route
                    key={item.name}
                    path={item.path}
                    element={item.element}
                  />
                ))}
            </Route>
          ))}
        </Routes>
      </BrowserRouter>
    </Suspense>
  );
}

export default App;
